<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
        }

        body {
            margin: 0px;
            background-color: rgb(19, 170, 165);
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        let canvas = document.querySelector('canvas')
        let ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.getElementById('text')
        function Text(i) {
            this.x = Math.random() * window.innerWidth
            this.y = Math.random()
            this.speed = Math.random() + 1


        }
        //雨滴
        setInterval(function () {
            ctx.fillStyle = 'rgba(19, 170, 165,0.1)'
            ctx.fillRect(0, 0, canvas.width, canvas.height)

            for (let i = 0; i < arr.length; i++) {
                if (arr[i].y >= 600) {
                    circle(arr[i].x, arr[i].y)
                    arr[i].y = 0
                    arr[i].speed = Math.random() + 1
                }
                ctx.beginPath()
                ctx.fillStyle = "white"
                ctx.fillRect(arr[i].x, arr[i].y, 3, 10)
                ctx.closePath()
                arr[i].y += arr[i].speed
            }
        }, 1000 / 60)


        let arr = []
        for (let i = 0; i < canvas.width / 30; i++) {
            arr.push(new Text(i))
        }
        //波纹
        function circle(x, y) {
            let r = 1
            let a = 1
            setInterval(function () {
                ctx.beginPath()
                ctx.arc(x, y, r, 0, Math.PI * 2)
                ctx.strokeStyle = "rgba(255,255,255," + a + ")"
                ctx.stroke()
                ctx.closePath()
                r++
                a = a - 0.005
            }, 1000 / 55)
        }

    </script>
</body>

</html>